<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="geometry" content="polygon">
  <link rel="stylesheet" href="./assets/common.css">
  <title>Color Map</title>
</head>

<body>
  <div id="canvas"></div>
  <script src="./assets/lodash-4.17.4.min.js"></script>
  <script src="./assets/jquery-3.2.1.min.js"></script>
  <script src="./assets/data-set.min.js"></script>
  <script src="../build/g2.js"></script>
  <script>
    const sites = [ '湘湖', '滨康路', '西兴', '滨和路', '江陵路', '近江', '婺江路', '城站', '定安路', '龙翔桥', '凤起路', '武林广场', '西湖文化广场', '打铁关', '火车东站', '闸弄口', '彭埠', '七堡', '九和路', '九堡', '客运中心', '下沙西', '金沙湖', '高沙路', '文泽路' ];
    const data = [];
    for (let i = 0; i < sites.length; i++) {
      for (let j = sites.length - 1; j >= i; j--) {
        let price = 0;
        const step = Math.abs(j - i);
        if (step <= 2) {
          price = 2;
        } else if (step <= 4) {
          price = 3;
        } else if (step <= 7) {
          price = 4;
        } else if (step <= 13) {
          price = 5;
        } else if (step <= 16) {
          price = 6;
        } else if (step <= 21) {
          price = 7;
        } else {
          price = 8;
        }
        const obj = { from: sites[i], to: sites[j], price };
        data.push(obj);
      }
    }

    const chart = new G2.Chart({
      container: 'canvas',
      forceFit: true,
      height: window.innerHeight,
      padding: [ 30, 10, 90, 100 ]
    });
    const defs = {
      from: {
        values: sites
      },
      to: {
        values: sites.slice(0).reverse()
      }
    };
    chart.axis('to', {
      title: null,
      grid: null,
      tickLine: null
    });
    chart.axis('from', false);
    chart.source(data, defs);
    chart.legend({
      itemWidth: 50,
      offset: 10
    });

    const ploygon = chart.polygon().position('from*to')
        .color('from')
        .style({
          lineWidth: 1,
          stroke: '#fff'
        });

    chart.render();
    chart.on('polygon:mouseenter', ev => {
      const shape = ev.shape;
      ploygon.highlightShapes([ shape ], { strokeStyle: '#000', lineWidth: 1 });
    });

  </script>
</body>

</html>
